<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>面板组件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin:100px">
<!-- 
	面板组件就是一个存放内容的容器组件。
	1.基本实例
		1) 	.panel 						//对最外层父级添加

		2)	.panel-default  			//对最外层父级添加,下同
			.panel-primary
			.panel-success
			.panel-info
			.panel-warning
			.panel-danger

		3)	.panel-heading
		4)	.panel-title
		5)	.panel-body
		6)	.panel-footer

	2.表格类面板	(与.panel-body并列)
		1)	.table

	3.列表组类面板	(与.panel-body并列)
 -->

	<div class="panel panel-primary">
		<div class="panel-heading">
			标题区域一
			<h3 class="panel-title">标题区域二</h3>
		</div>

		<div class="panel-body">
			我是一个面板容器	
		</div>
		
		<!-- 表格类面板 -->
		<table class="table">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td>c</td>
			</tr>
		</table>
		
		<!-- 列表组类面板 -->
		<div class="list-group">
			<a href="#" class="list-group-item">1</a>
			<a href="#" class="list-group-item">2</a>
			<a href="#" class="list-group-item">3</a>
			<a href="#" class="list-group-item">4</a>
		</div>

		<div class="panel-footer">注脚</div>
	</div>




	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>